<template>
  <div class="im-container">
    <div id="chat_plat_view" class="panel-body" style="overflow-y: scroll;height: 460px;">
      <p v-for="(item, index) in wsMsg" :key="index">{{ item }}</p>
    </div>
    <input v-model="sendWsMsg" type="text">
    <button @click="wsSend()">点击</button>
  </div>
</template>

<script>
import store from '@/store'
import { webSocketSend } from '@/utils/websocket'

import { getToken } from '@/utils/auth'

export default {
  name: 'Im',
  data() {
    return {
      wsMsg: [],
      sendWsMsg: ''
    }
  },
  computed: {
    wsMsgList() {
      return store.getters.wsMsgList
    }
  },
  watch: {
    wsMsgList: function() {
      this.wsMsg = store.getters.wsMsgList
      console.log(this.wsMsg)
    }
  },
  mounted() {
    this.wsMsg = store.getters.wsMsgList
  },
  methods: {
    wsSend: function() {
      const sendMsg = { token: getToken(), wsMsg: this.sendWsMsg }
      webSocketSend(sendMsg)
      this.sendWsMsg = ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
